Personal – Container Alpha
2009/06—
2011/12
2009/06—
2011/12
Design & Code
Andrew Chee
Concept
Designed, coded, and released in June 2009, Container Alpha, titled "Work in Progress," served as my personal site until the end of 2011. The concept for the "container" was an experiment in pushing the portfolio user interface past the conventional blog formats that did not make full use of any given container's real estate / resolution.
Large hit areas, all buttons, adaptive to any container / resolution / device by generous use of the CSS (Cascading Style Sheets) float property. It was to be an entire design portfolio, photo blog, CV, and growing collection of data —contained in a shell composed of just a single square unit with only 4 variations. The resulting composition, dependent on the viewport used, would be different every day for frequently updated pages, generating an unexpected large pixel pattern each time it was visited.
Designed, coded, and released in June 2009, Container Alpha, titled "Work in Progress," served as my personal site until the end of 2011. The concept for the "container" was an experiment in pushing the portfolio user interface past the conventional blog formats that did not make full use of any given container's real estate / resolution.
Large hit areas, all buttons, adaptive to any container / resolution / device by generous use of the CSS (Cascading Style Sheets) float property. It was to be an entire design portfolio, photo blog, CV, and growing collection of data —contained in a shell composed of just a single square unit with only 4 variations. The resulting composition, dependent on the viewport used, would be different every day for frequently updated pages, generating an unexpected large pixel pattern each time it was visited.
Modularity
The 4 units were designed as follows: 1) Navigation (black, dark grey, and light grey), 2) Text Content (white), 3) Images (full bleed), and 4) Inactive (background color and/or striped for system messages).
The right arrow → indicated reading and float order, housed in the only inactive unit of the system, the background. Thus, every unit in the foreground is active. The presence of the up arrow ↑ on rollover of any active unit, indicated that the resulting link would open a new window. The start and end of all content on any page of the site was straddled by a beginning and ending black block —the nameplate and the copyright.
The 4 units were designed as follows: 1) Navigation (black, dark grey, and light grey), 2) Text Content (white), 3) Images (full bleed), and 4) Inactive (background color and/or striped for system messages).
The right arrow → indicated reading and float order, housed in the only inactive unit of the system, the background. Thus, every unit in the foreground is active. The presence of the up arrow ↑ on rollover of any active unit, indicated that the resulting link would open a new window. The start and end of all content on any page of the site was straddled by a beginning and ending black block —the nameplate and the copyright.
With this system, any number of pages and variations could be composed.
Development
This was a project that I believe is best designed in code. The initial designs, sketches, and interaction paradigms quickly evolved once I started prototyping with flat HTML/CSS, to see what was and wasn't possible. Once the number of unit types were reduced to the bare minimum, and test layouts were achieved, all that was left to do was to feed it data and see how it behaved. This was done simply with PHP, with minimal Javascript to handle just a handful of supplementary behaviors such as rollovers.
All made possible with many thanks to JQuery / MooTools (swapped to the former in early 2011), mySQLicious, phpFlickr, and Slimbox for image viewers. Everything was coded from scratch in TextMate, tested locally in XAMPP, and debugged countless times via Firebug.
This was a project that I believe is best designed in code. The initial designs, sketches, and interaction paradigms quickly evolved once I started prototyping with flat HTML/CSS, to see what was and wasn't possible. Once the number of unit types were reduced to the bare minimum, and test layouts were achieved, all that was left to do was to feed it data and see how it behaved. This was done simply with PHP, with minimal Javascript to handle just a handful of supplementary behaviors such as rollovers.
Regarding the data, my approach at the time was to forgo the standard hosted CMS (Content Management System) options available which are excellent but for my purposes bloated and not flexible enough. With the move towards the cloud (this was 2009), I strongly believed at the time that the CMS should be distributed —the native service as the CMS— Flickr, Delicious, Twitter, aggregated by FriendFeed (RIP) and all accessed via API.
All made possible with many thanks to JQuery / MooTools (swapped to the former in early 2011), mySQLicious, phpFlickr, and Slimbox for image viewers. Everything was coded from scratch in TextMate, tested locally in XAMPP, and debugged countless times via Firebug.
Iterations
Container Alpha lived through many iterations for its nearly 3 years online, finding itself adapting to new resolutions and devices —from desktop to mobile— around the world, living up to its name. Here are a few screenshots.
Container Alpha lived through many iterations for its nearly 3 years online, finding itself adapting to new resolutions and devices —from desktop to mobile— around the world, living up to its name. Here are a few screenshots.
Composites
In early 2012, right before retiring Container Alpha, I decided to test the limits of the liquid layout by stretching viewports to their current limits via software —things a normal user would never do, but generates some interesting results. These are composites of Container Alpha constrained to 1 unit wide to 60 wide, the captures then sliced up and recombined to make the following.
In early 2012, right before retiring Container Alpha, I decided to test the limits of the liquid layout by stretching viewports to their current limits via software —things a normal user would never do, but generates some interesting results. These are composites of Container Alpha constrained to 1 unit wide to 60 wide, the captures then sliced up and recombined to make the following.
